<template>
  <div class="todoapp">
    <!-- 组件标签  -->
  <todo-header :arr="list" @createTask="onCreate"></todo-header>
  <todo-main @delItem="onDelItem" :arr="filterList"></todo-main>
  <todo-footer 
  :active="isActive"
  @onClear="onClear" 
  @setActive="onSetActive"
  :arr="list">
  </todo-footer>
  </div>
</template>

<script>
// 1.0 样式引入
import './styles/base.css'
import './styles/index.css'
// 引入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  data() {
    return {
      // 设置选项按钮是否高亮
      // 一个属性 父子组件都要用 最好定义在父组件 (因为父传子方便)
      // 如果这个属性只在子组件使用  就定义在子组件
      isActive: 'undone',

      //  undone --> 未完成   done --> 已完成  all --> 所有

      list: JSON.parse(localStorage.getItem('list')) || []
    }
  },

  watch: {
    list: {
      deep: true,
      handler() {
        console.log('数据发生了变化')
        localStorage.setItem('list', JSON.stringify(this.list))
      }
    }
  },

  created() {},

  computed: {
    filterList() {
      if (this.isActive === 'done') {
        return this.list.filter(item => item.isDone)
      }
      // 未完成
      if (this.isActive === 'undone') {
        return this.list.filter(item => !item.isDone)
      }
      // 全部
      return this.list
    }
  },

  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  methods: {
    // 添加
    onCreate(taskName) {
      // 如果添加的任务已存在,提示不能重复添加
      // some 返回一个布尔值 true : 有一项条件成立 则返回true
      const flag = this.list.some(item => item.name === taskName)
      if (flag) return alert('任务名重复!')
      // 动态生成id 使之能够多次添加
      const id = this.list[this.list.length - 1] ? this.list[this.list.length - 1].id + 1 : 0
      this.list.push({
        // 属性和属性值相等时 写一个即可
        id,
        name: taskName,
        isDone: false
      })
    },
    // 清除已完成
    onClear(unDone) {
      this.list = unDone
    },
    // 点击全部/未完成/已完成
    onSetActive(active) {
      this.isActive = active
    },
    // 删除某一项
    onDelItem(id) {
      const index = this.list.findIndex(item => {
        return item.id === id
      })
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped>
</style>
